<template>
  <div class="w-full">
    <div class="mb-5 flex items-center text-xs text-[#fff]">
      <div class="mr-2.5 flex items-center">
        <p class="mr-3 text-[#929495]">{{ $mt('TOTAL REVIEWS') }}</p>
        <p class="text-base font-[500] font-mono">{{ totalReviewsInfo.totalReviews || 0 }}</p>
      </div>
      <div class="mr-2.5 flex items-center">
        <p class="mr-3 text-[#929495]">{{ $mt('AVG RATINGS') }}</p>
        <p class="text-base font-[500] font-mono">{{ totalReviewsInfo.avgReviews || 0 }}</p>
      </div>
    </div>

    <div class="w-full text-xs text-[#fff]" v-if="curGoodsReviews.length">
      <div
        class="mb-8 flex items-center justify-between lg:w-full"
        v-for="(item, index) in curGoodsReviews"
        :key="index">
        <div class="flex">
          <y-image
            class="mr-1.5 h-9 w-9 rounded-[50%] lg:mr-4"
            :src="$withPicOrigin(item.avatar)"
            width="36"
            height="36" />
          <div>
            <p>{{ item.userName }}</p>
            <van-rate class="mb-3" :model-value="item.rating" color="#02bbff" size="12px" />
            <p class="text-[#c8c9ca] text-ellipsis">{{ item.comment }}</p>
          </div>
        </div>
        <p class="text-xs text-[#929495] whitespace-nowrap">{{ item.createdAt }}</p>
      </div>
    </div>
    <van-empty v-else image="/v2/home-imgs/empty2.png" :description="$mt('nothing here')" />
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useGoodsStore } from '~/store/goods'

const goodsStore = useGoodsStore()
const { totalReviewsInfo, curGoodsReviews, curGoodsDetail, reviewsInfo } = storeToRefs(goodsStore)
</script>

<style lang="scss"></style>
